(function ($) {
  "use strict";
  $.fn.tableFilter2 = function (options) {
    var defaultOptions = {
      placeholder: 'Filtr',
      select2: false,
      selectData: [],
      datepicker: false,
      type: 'text'
    }
    var options = $.extend({}, defaultOptions, (options == undefined) ? {} : options)

    var $this = $(this);
    var $table = $this.closest('table');

    var getOption = function(key, $selector) {
      if (key == 'selectData') {
        if ($selector.attr('data-filter-'+key) == undefined)
          return options.selectData;
        return $selector.attr('data-filter-'+key).split(',')
      }
      return ($selector.attr('data-filter-'+key) == undefined) ? options[key] : $selector.attr('data-filter-'+key);
    }

    var createSelector = function($container, options) {
      switch (getOption('type', $container)) {
        case 'date':
          var $selector = $('<input class="form-control filter-control" />');
          $selector.attr('placeholder', getOption('placeholder', $container));
          if (options.datepicker)
            $selector.datepicker({
              dateFormat: 'yy-mm-dd'
            });
          return $selector;
        case 'text':
          var $selector = $('<input class="form-control filter-control" />');
          $selector.attr('placeholder', getOption('placeholder', $container));
          return $selector;
        case 'select':
          var $selector = $('<select class="form-control filter-control placeholder">');
          $selector.append('<option style="display:none;" value="" disabled default selected>'+getOption('placeholder', $container)+'</option>');
          $.each(getOption('selectData', $container), function(key, value) {
            $selector.append('<option>'+value+'</option>')
          });
          return $selector;
      }
    }

    $this.each(function(key, value) {
      var $th = $(value);
      var $selector = createSelector($th, options);

      var $container = $('<div class="filter-control-container">').html($selector);
      $container.append('<i class="glyphicon glyphicon-remove remove">');
      $th.append($container);
      if (getOption('type', $th) == 'select' && options.select2) {
        $selector.select2({
          width: 100
        });
      }
    });

    $table.find('.filter-control-container .remove').on('click', function() {
      var $control = $(this).closest('.filter-control-container').find('.filter-control');
      $control.val('').trigger('change');
    });

    $this.find('select.filter-control').on('change', function() {
      if ($(this).val() == null)
        $(this).addClass('placeholder');
      else
        $(this).removeClass('placeholder');
    });
    $this.find('.filter-control').on('change', function() {
      var $input = $(this);
      var index = $input.closest('th').index() + 1;
      var filterValue = ($input.val() == null) ? '' : $input.val().toLowerCase();
      $table.find('.filterTable-row td:nth-child('+index+')').each(function(key, value) {
        if (filterValue == '' || $(value).html().toLowerCase().indexOf(filterValue) != -1) {
          var $tr = $(value).closest('tr');
          var dataFilter = ($tr.attr('data-filter') == undefined) ? '' : $tr.attr('data-filter');
          if (dataFilter.indexOf('{'+index+'}') != -1) {
            dataFilter = dataFilter.replace('{'+index+'}', '');
            $tr.attr('data-filter', dataFilter);
          }
          if (!$tr.is('visible') && dataFilter == '')
            $tr.show();
        } else {
          var $tr = $(value).closest('tr').hide();
          var dataFilter = ($tr.attr('data-filter') == undefined) ? '' : $tr.attr('data-filter');
          if (dataFilter.indexOf('{'+index+'}') == -1) {
            dataFilter += '{'+index+'}';
            $tr.attr('data-filter', dataFilter);
          }
        }
      })
    });
  };
}(jQuery));